<script setup>
import { computed,ref,onMounted,unref } from 'vue';
import { useCartStore } from '../../stores/cart';
import { showToast } from '../../utils/common';
//购物车信息
const cartStore=useCartStore()

//商品数量
const num=ref(1)
const props=defineProps({
	good:{
		type:Object,
		default:{}
	},
	skuId:{
		type:String,
		default:""
	}
})

const emits=defineEmits(['update:skuId','closeSku'])

//sku规格列表
const skuList=computed(()=>props.good.sku || [])
const skuInfo=computed(()=>skuList.value.find(item=>item._id==props.skuId)||{})
const handleSkuChange = (id)=>{
	emits('update:skuId',id)
}

//改变商品数量
const numChange=(e)=>{
	
}

const createInfo = ()=>{
	if(!unref(skuInfo)._id){
		 showToast({title:"缺少规格参数",icon:"error"})
		 throw new 	Error("缺少规格参数")
	}
	 return {
		 ...props.good,
		 _skuInfo:unref(skuInfo),
		 _countNum:unref(num)
	 }
}



//加入购物车
const handleCart = ()=>{
	//关闭弹窗
	emits('closeSku')
	const shopInfo = createInfo()
	
	cartStore.pushGoods(shopInfo)
	
	console.log(shopInfo)
}
//立即购买
const handleBuy = ()=>{
	
	//关闭弹窗
	emits('closeSku')
}



</script>


<template>
  <view class="shop-sku">
    <view class="info-wrap">
		<card-goods-info  :good="props.good" :Type="3"  :sku="skuInfo"></card-goods-info>
	</view>
	<view class="sku-list-wrap">
		<view class="label">规格</view>
		<view class="sku-list">
			<view class="sku-item" @tap="handleSkuChange(item._id)" :class="{active:item._id==skuId}" v-for="item in skuList" :key="item._id">{{item.name}}</view>
		</view>
	</view>
	
	<view class="set-count-wrap">
		<view class="label">数量</view>
		<view class="count">
			<uv-number-box v-model="num" @change="numChange" :min="1" :max="10"></uv-number-box>
		</view>
	</view>
	
	<view class="btn-wrap">
		<view class="btn car-btn" @tap="handleCart">加入购物车</view>
		<view class="btn buy-btn" @tap="handleBuy">立即购买</view>
	</view>
  </view>
</template>


<style lang="scss" scoped>
.shop-sku{
	padding-bottom: 32rpx;
	.info-wrap {
		margin-bottom: 32rpx;
	}
	.sku-list-wrap {
		padding: 32rpx 0 0;
		.label {
			font-size: 32rpx;
			color: #000;
			font-weight:bolder;
		}
		.sku-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			padding: 32rpx 0;
			gap: 20rpx;	
			.sku-item {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 5rpx 20rpx;
				color: #666;
				font-size: 32rpx;
				background-color: #f4f4f4;
				border-radius: 4rpx;
				&.active{
					color: #fff;
					background-color: $uni-color-primary;
				}
			}
			
		}
	}
	
	.set-count-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 80px;
		.label {
			font-size: 32rpx;
			font-weight: bolder;
			color: #333;
		}
	}
	
	.btn-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			height: 80rpx;
			font-size: 28rpx;
			color: #fff;
		}
		.car-btn{
			background-color: #FF9300;
			border-radius: 80rpx 0 0 80rpx;
		}
		.buy-btn{
			background-color: #EF5350;
			border-radius: 0 80rpx 80rpx 0;
		}
	}
	
}



</style>